<template>
  <el-container class="max_container">
    <el-row>
      <el-col :span="24">
        <div style="padding-left: 10px">
          <span>{{username}}</span>
          <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item v-for="(a,index) in pathName" :key="index">
              <span @click="testclick2(index)" style="color:#09AAff">{{a}}</span>
            </el-breadcrumb-item>
            <el-breadcrumb-item>
              <span>{{currentPath.name}}</span>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-col>
      <el-col>
        <el-table :data="tableData" height="250"
            border style="width: 100%">
          <el-table-column prop="name" label="文件名">
            <template slot-scope="scope">
              <span v-if="id !== scope.row.id">
                <i class="el-icon-folder"></i>
                <span style="margin-left: 10px" @click="testclick(scope.row)">{{ scope.row.name }}</span>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </el-container>
</template>

<script>

export default {
  data() {
    return {
      drawer: false,
      tableData: [],
      pathName: [],
      pathId: [],
      currentPath: { index: 1, name: "根节点" },
    };
  },
  methods: {
    async testclick(file) {
      if (file.status == 1) {
        this.pathName.push(this.currentPath.name);
        this.pathId.push(this.currentPath.index);
        this.currentPath.index = file.id;
        this.pId = file.id
        this.currentPath.name = file.name;
        this.$emit('update:pId', this.pId)
        const { data: res } = await this.$http.get(
          "/api_file/file/getFoldersById?pId=" + this.currentPath.index
        );
        this.tableData = res;
      }
    },
    async testclick2(index) {
      this.currentPath.index = this.pathId[index];
      this.pId = this.pathId[index]
      this.$emit('update:pId', this.pId)
      for (let i = this.pathId.length - 1; i >= index; i--) {
        this.pathId.pop();
      }
      this.currentPath.name = this.pathName[index];
      for (let i = this.pathName.length - 1; i >= index; i--) {
        this.pathName.pop();
      }
      const { data: res } = await this.$http.get(
        "/api_file/file/getFoldersById?pId=" + this.currentPath.index
      );

      this.tableData = res;
    }
  },
  props: {
      pId: String,
      id: String
  },
  async created() {
    const { data: res } = await this.$http.get(
      "/api_file/file/getFoldersById?pId=" + this.currentPath.index
    );
    this.$emit('update:pId', 1)
    this.tableData = res;
  },
}
</script>

<style lang="less" scoped>
.max_container {
  height: 50%;
  border: 0;
}
.el-breadcrumb {
  font-size: 20px;
  line-height: 2;
  margin-left: 20px
;
}
</style>